<template>
  <button class="w-button"><span>{{ text }}</span></button>
</template>

<script setup lang='ts'>
import { reactive, toRefs, onBeforeMount, onMounted, watchEffect } from 'vue'

interface Prop {
  size?: string;
  text?: string;
}

withDefaults(defineProps<Prop>(), {
  size: 'default',
  text: '默认'
})
// console.log('1-开始创建组件-setup')
/**
 * 数据部分
 */
const data = reactive({})

onBeforeMount(() => {
  // console.log('2.组件挂载页面之前执行----onBeforeMount')
})
onMounted(() => {
  // console.log('3.-组件挂载到页面之后执行-------onMounted')
})
watchEffect(() => {
})
// 使用toRefs解构
// let { } = { ...toRefs(data) }
defineExpose({
  ...toRefs(data)
})

</script>
<style scoped lang='less'>
.w-button{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  &:hover{
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
}
</style>
